<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import 'echarts-liquidfill'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      data: [
        {
          name: '一级预警',
          value: 175
        },
        {
          name: '二级预警',
          value: 148
        },
        {
          name: '三级预警',
          value: 95
        }
      ],
      xAxisData: [],
      seriesData1: [],
      sum: 0,
      barTopColor: ['#f0360c', '#edde0d', '#0befa3f7'],
      barBottomColor: ['rgba(240, 54, 12, 0.178)', 'rgba(237, 222, 13, 0.173)', 'rgba(11, 239, 163, 0.163)']
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.data.forEach(item => {
        this.xAxisData.push(item.name)
        this.seriesData1.push(item.value)
        this.sum += item.value
      })
      this.initChart()
    })

    setInterval(() => {
      this.refreshData()
    }, 1000)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        grid: {
          top: '15%',
          bottom: '30%'
        },
        xAxis: {
          data: this.xAxisData,

          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 25,
            align: 'center',
            formatter: (params, index) => {
              return '{a|' + ((this.seriesData1[index] / this.sum) * 100).toFixed(2) + '%}' + '\n' + '{b|' + params + '}'
            },
            textStyle: {
              fontSize: 14,
              color: '#ffffff',
              rich: {
                a: {
                  fontSize: 12,
                  color: '#ffffff'
                },
                b: {
                  height: 20,
                  fontSize: 14,
                  color: '#ffffff'
                }
              }
            }
          },
          interval: 0
        },
        yAxis: {
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '柱顶部',
            type: 'pictorialBar',
            symbolSize: [26, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: params => {
                  return this.barTopColor[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 16
            },
            symbolPosition: 'end',
            data: this.seriesData1
          },
          {
            name: '柱底部',
            type: 'pictorialBar',
            symbolSize: [26, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: params => {
                  return this.barTopColor[params.dataIndex]
                }
              }
            },
            data: this.seriesData1
          },
          {
            name: '第一圈',
            type: 'pictorialBar',
            symbolSize: [47, 16],
            symbolOffset: [0, 11],
            z: 11,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#02c3f1',
                borderWidth: 2
              }
            },
            data: this.seriesData1
          },
          {
            name: '第二圈',
            type: 'pictorialBar',
            symbolSize: [62, 22],
            symbolOffset: [0, 17],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#02c3f1',
                borderWidth: 2
              }
            },
            data: this.seriesData1
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: params => {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: this.barTopColor[params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: this.barBottomColor[params.dataIndex]
                    }
                  ])
                },
                opacity: 0.8
              }
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: '-100%', // Make series be overlap
            data: this.seriesData1
          }
        ]
      })
    },
    refreshData() {
      var i = Math.round(Math.random()) * 2
      var j = Math.round(Math.random()) * 3
      var option = {}
      // this.chart.setOption(option)
    }
  }
}
</script>
